<template>
	<div id="login">
		<div class="left">
			<!-- <img src="../../assets/icon/loginBG.png" alt /> -->
		</div>
		<div class="left-content flex-center flex-column" style="text-align: center;">
			<div style="font-size:80px;">全市教育系统自然灾害预警管理系统</div>
			<!-- <div style="font-size:80px;">预警管理系统</div> -->
		</div>
		<div style="width:50%" class="right">
			<div class="right-content">
				<!-- <img src="../../assets/icon/ruyi.png" alt /> -->
				<div class="main">
					<h1>管理员登录</h1>
					<div class="code">
						<input type="text" v-model="phoneNumber" placeholder="请输入账号" />
					</div>

					<div class="code">
						<input ref="code" v-model="phoneCode" id="code" type="password" placeholder="请填写密码" />
						<!-- <a href="javascript:;" v-if="codeTime == 0" class="text" @click="loginTo">获取短信验证码</a>
            <a href="javascript:;" v-else class="text">{{codeTime}}s</a>-->

					</div>
					<!-- <div class="code flex-between">
            <input v-model="code" type="number" placeholder="请填写验证码" />
            <img ref="codeImg" src="" alt="" />
          </div> -->
					<el-button type="primary" style="margin-top: 30px" @click="login">登录</el-button>
					<div class="main-bottom margin-50"></div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
var timeBlock;
import { loginByCode } from '../api';

import { routeGuard } from '@/assets/js/permission';
export default {
	name: 'login',
	data() {
		return {
			check: true, //阅读同意
			successButton: true, //确认按钮
			phoneCode: '', //短信验证码
			pass: '', //第一次密码
			passWord: '', //重复密码
			code: '', //用户输入的图形验证码
			phoneNumber: '', //输入手机号
			successphoneNumber: '', //上一次发送验证码的手机号
			imageCaptchaUrl: '', //验证图片
			imageCaptchaToken: '', //图片验证令牌
			// passwordImg: require("../../assets/icon/bxsmm.png"),
			// passwordImg2: require("../../assets/icon/xsmm.png"),
			isok: true, //控制密码的显隐
			isok2: true, //控制密码的显隐
			value: '中国+86',
			homePath: '/contract/List',
			codeImg: '',
			// homePath: "/home",
			codeTime: 0,
		};
	},
	created() {
		this.$nextTick(() => {
			this.imgChange();
		});
		this.enterKeyup();
		// this.codeImage_user();
		if (
			window.localStorage.userList &&
			JSON.parse(window.localStorage.userList).token
		) {
			//缓存已有登录信息跳转
			routeGuard(true); //重置路由
		}
	},
	destroyed() {
		this.enterKeyupDestroyed();
		console.log('close');
	},
	methods: {
		imgChange() {
			var url =
				this.$store.state.openUrl +
				'user/api/system/user/codeImage?t=' +
				new Date().getTime();
			this.$refs.codeImg.src = url;
		},
		enterKey(event) {
			const componentName = this.$options.name;
			const code = event.keyCode
				? event.keyCode
				: event.which
				? event.which
				: event.charCode;
			// console.log(code);
			if (code == 13) {
				this.login();
			}
		},
		enterKeyupDestroyed() {
			//取消监听
			document.removeEventListener('keyup', this.enterKey);
		},
		enterKeyup() {
			//监听回车
			document.addEventListener('keyup', this.enterKey);
		},
		countDown() {
			this.codeTime = 60;
			timeBlock = setInterval((res) => {
				if (this.codeTime > 0) {
					this.codeTime--;
				} else {
					clearInterval(timeBlock);
				}
			}, 1000);
		},
		countDown() {
			this.codeTime = 60;
			timeBlock = setInterval((res) => {
				if (this.codeTime > 0) {
					this.codeTime--;
				} else {
					clearInterval(timeBlock);
				}
			}, 1000);
		},
		//发送短信验证码
		loginTo(e) {
			this.countDown();
			var that = this;
			var reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
			if (this.phoneNumber == '') {
				alert('请输入联系方式');
			} else if (!reg.test(this.phoneNumber)) {
				alert('手机格式不正确');
			} else {
				that.successphoneNumber = this.phoneNumber;
				console.log(
					this.phoneNumber,
					this.imageCaptchaToken,
					this.code
				);
				sendPhoneCode({
					phone: this.phoneNumber,
					type: 2,
				}).then((res) => {
					if (res.code == 1001) {
						this.$message({
							type: 'success',
							message: '发送成功',
						});
					}
				});
			}
		},
		list_contract() {
			var params = { type: '国际' };
			this.$myApi.list_contract(params).then((res) => {
				if (res.code == 200) {
					this.$store.state.contractAllList = res.data;
				}
			});
		},
		// 登录
		login() {
			var parmas = {
				userAccount: this.phoneNumber,
				password: this.phoneCode,
				// code: this.code,
			};
			this.$myApi.login(parmas).then((res) => {
				if (res.code == 200) {
					// this.$store.state.token = res.returnData.token
					var  menuList = []
					menuList.push({
						name: '业务管理',
						childList: [
							{
								name: '用户管理',
								path: '/systemInfo/User',
								component: '/systemInfo/User',
								childList: [],
							},
							{
								name: '学校管理',
								path: '/biz/school',
								component: '/biz/school',
								childList: [],
							},
							{
								name: '预警信息管理',
								path: '/biz/earlyWarningMsg',
								component: '/biz/earlyWarningMsg',
								childList: [],
							},
							{
								name: '消息模板',
								path: '/biz/msg',
								component: '/biz/msg',
								childList: [],
							},
							{
								name: '短信发送记录',
								path: '/biz/infoData',
								component: '/biz/infoData',
								childList: [],
							},
						],
					});
					res.data.menuList = menuList
					window.localStorage.setItem(
						'userList',
						JSON.stringify(res.data)
					);
					this.$store.state.token = res.data.token;
					routeGuard(true); //重置路由
					// this.$router.push(this.homePath);
					// this.groupByType_basicData();
					// this.list_contract();
					// this.SET_MEANTOTAL();
				} else {
					this.imgChange();
				}
			});
		},
		groupByType_basicData() {
			this.$myApi.groupByType_basicData().then((res) => {
				if (res.code == 200) {
					this.$store.state.typeAllList = res.data;
				}
			});
		},
		codeImage_user() {
			this.$myApi.codeImage_user().then((res) => {
				this.codeImg = res;
			});
		},
	},
	watch: {},
};
</script>
<style scoped>
.imageCaptchaUrl {
	position: absolute;
	height: 30px;
	width: 85px;
	right: 0;
	top: 0;
}
.left-content {
	width: 50%;
	height: 100%;
	float: left;
	margin: 0 auto;
	color: #fff;
}
</style>

